<script setup>
import {ref} from 'vue'
import router from "../../../../../router/index.js";
import {getDiscussion, getTask, insertParentReview, listDiscussionReview} from "../../../../../api/course/course.js";
import {ElMessage} from "element-plus";

// 任务id
const taskId = ref();
taskId.value = router.currentRoute.value.params.id;
// 评论对象
const review = ref({
  content: '',
  discussId: '',
  parentId:''
});
// 评论列表
const discussReviewList = ref([]);

// 任务
const task = ref({});
// 讨论
const discuss = ref({});
// 评论
const replyContent = ref('')
// 是否显示回复

// 鼠标移入事件
const handleMouseOver = (isReview) => {
  isReview.value = true;
}
// 鼠标移出事件
const handleMouseLeave = (isReview) => {
  isReview.value = false;
}

// 获取任务信息
const handleGetTask = async () => {
  await getTask(taskId.value).then(res => {
    task.value = res.data;
    console.log(task.value);
    handleGetDiscuss();
  });
}

// 获取讨论信息
const handleGetDiscuss = async () => {
  await getDiscussion(taskId.value).then(res => {
    discuss.value = res.data;
    review.value.discussId = discuss.value.id;
    handleGetDiscussReview();
  })
}


// 获取讨论回复
const handleGetDiscussReview = async () => {
  await listDiscussionReview(discuss.value.id).then(res => {
    handleAnalysisArray(res.data);
    console.log(res.data);
  })
}
// 解析数组的方法
const handleAnalysisArray = (arr) => {
  discussReviewList.value = [];
  for( let i = 0; i < arr.length; i++) {
    if(arr[i].parentId=='' ||arr[i].parentId==null){
      discussReviewList.value.push(arr[i]);
      // 添加字段
      discussReviewList.value[i].isReview=false;
      discussReviewList.value[i].children=[];
      console.log(discussReviewList.value);
    }
    else{
      for( let j = 0; j < discussReviewList.value.length; j++) {
        if(discussReviewList.value[j].id==arr[i].parentId){
          discussReviewList.value[j].children.push(arr[i]);
        //  添加字段
          discussReviewList.value[j].children[discussReviewList.value[j].children.length-1].isReview=false;
        }
      }
    }
  }
}

//插入父级评论
const handleInsertParentReview = async () => {
  await insertParentReview(review.value).then(() => {
    ElMessage.success("评论成功");
    review.value.content = '';
    handleGetDiscussReview();
  })
}
// 插入子级评论
const handleInsertSonReview=async (discussReview)=>{
  review.value.parentId=discussReview.id;
  await insertParentReview(review.value).then(()=>{
    ElMessage.success("评论成功");
    review.value.content = '';
    handleGetDiscussReview();
  })
}

handleGetTask();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #3a4357;height: 10vh">
        <div style="display: flex; align-items: center; height: 100%;">
          <span style="color: white;margin-left: 50%">{{ task.name }}</span>
        </div>
      </el-header>
      <el-main>
        <div style="display:flex; justify-content: center;">
          <el-card style="height: 80vh; width: 1000px;border-radius: 12px;">
            <h3>讨论题目</h3>
            <span>{{ discuss.content }}</span>
            <el-divider/>
            <el-input
                v-model="review.content"
                style="width: 800px;margin-right: 20px"
                autosize
                type="textarea"
                placeholder="请输入内容"
            />
            <el-button type="primary" style="width: 100px" @click="handleInsertParentReview">发布</el-button>
            <h3>评论区</h3>

            <div v-for="(discussReview,index) in discussReviewList " :key="discussReview.id">
              <div >
                <div style="display: flex">
                  <el-avatar :size="40" :src="discussReview.headerLink"/>
                  <span style="margin-left: 15px">{{discussReview.username}}</span>
                </div>
                <div style="margin-left: 40px">
                  <div>{{ discussReview.content }}</div>
                  <div style="display: flex;font-size: 14px;opacity:80%;margin-top: 2px">
                    <div>{{ discussReview.createTime}}</div>
                    <el-icon
                        style="width: 40px;margin-left: 20px"
                        @mouseover="handleMouseOver(discussReview.isReview)"
                        @mouseleave="handleMouseLeave(discussReview.isReview)"
                        :class="{ 'is-active': discussReview.isReview}"
                        @click="discussReview.isReview=!discussReview.isReview"
                    >
                      回复
                    </el-icon>
                    <!--子级回复-->
                  </div>
                  <div v-if="discussReview.isReview">
                    <el-input
                        v-model="review.content"
                        style="width: 700px;margin-right: 20px"
                        autosize
                        type="textarea"
                        placeholder="请输入内容"

                    />
                    <el-button type="primary" style="width: 100px" @click="handleInsertSonReview(discussReview)">发布</el-button>
                  </div>
                </div>
              </div>
              <!--              子级评论-->
              <div style="margin-left: 50px;margin-top: 20px" v-for="discussSonReview in discussReviewList[index].children">
                <div style="display: flex">
                  <el-avatar :size="30" :src="discussSonReview.headerLink"/>
                  <span style="margin-left: 15px">{{discussSonReview.username}}</span>
                </div>
                <div style="margin-left: 40px">
                  <div>{{discussSonReview.content}}</div>
                  <div style="display: flex;font-size: 14px;opacity:80%;margin-top: 2px">
                    <div style="font-size: 14px">{{discussSonReview.createTime}}</div>
                    <el-icon
                        style="width: 40px;margin-left: 20px"
                        @mouseover="handleMouseOver(discussSonReview.isReview)"
                        @mouseleave="handleMouseLeave(discussSonReview.isReview)"
                        :class="{ 'is-active':discussSonReview.isReview }"
                        @click="discussSonReview.isReview=!discussSonReview.isReview"
                    >
                      回复
                    </el-icon>
                    <!--子级回复-->
                  </div>
                  <div v-if="discussSonReview.isReview">
                    <el-input
                        v-model="review.content"
                        style="width: 600px;margin-right: 20px"
                        autosize
                        type="textarea"
                        placeholder="请输入内容"
                    />
                    <el-button type="primary" style="width: 100px" @click="handleInsertSonReview(discussReview)">发布</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.is-active {
  color: #00a1d6;
}
</style>